<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-02-06 14:55:42
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-02-08 11:38:19
 * @FilePath: News.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-02-06 14:55:42
 * @Description: 
-->
<template>
  <div class="container">
    <!--搜索-->
    <div class="search_news">
      <el-row>
        <el-col :span="6">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          资讯类型：
          <el-select v-model="queryParams.reportType" clearable placeholder="请选择资讯类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          资讯标题：
          <el-input
          style="width: 70%;"
            placeholder="请输入资讯标题"
            v-model="queryParams.informationTheme"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="8">
          资讯时间：
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <el-button type="primary" @click="search">&nbsp;查 找&nbsp;</el-button>
            </el-col>
            <el-col :span="12">
              <el-button plain @click="reset">&nbsp;重 置&nbsp;</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!--左侧-->
    <div  v-loading="loadingStatus">
      <div class="list_left">
        <span style="padding: 0 10px; font-size: 18px; font-weight: bold;">新闻资讯:</span>
        <ul class="infinite-list">
          <li v-for="(item, index) in newsList" :key="index" @click="displayPage(item)" class="infinite-list-item">
            <div class="orange-square">&nbsp;&nbsp;&nbsp;{{ item.informationTheme }}</div>
          </li>
        </ul>
        <!--底部分页-->
        <div class="page_class">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="queryParams.pageNum"
            :page-size="9"
            layout="total, prev, pager, next"
            :total="totalPage">
          </el-pagination>
        </div>
      </div>
      <!--右侧--> 
      <div class="content_right">
        <!-- <div> -->
          <div class="content_title" >
            <h3>{{ this.information.informationTheme }}</h3>
          </div>
          <div class="content_time_partment"   v-show="this.information == null ? false : true">
            发布时间：{{ this.information.createTime }} &nbsp; 来源：{{ this.information.issueBy }}
          </div>
          <div class="content_html" v-html="this.decrypt(this.information.reportContent)"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {listnewsInfo} from '@/api/home'
import {formatDate} from '@/utils/index'
import store from '@/store'
export default {
  name: 'news',

  data() {
    return {
      // 密钥
      key: 'ZRpY7wx9P29m*$YGevMj%6HJFdn8Fe',
      options: [{
          value: '1',
          label: '市场动态'
        }, {
          value: '2',
          label: '农业政策'
        }, {
          value: '3',
          label: '贸易信息'
        }, {
          value: '4',
          label: '农业科普'
      }],
      queryParams: {
        pageNum: 1,
        pageSize: 9,
        informationTheme: null,
        reportType: null,
        startTime: null,
        endTime: null
      },
      totalPage: 0,
      timeValue: null,
      newsList: [],
      information: {},
      toPageItem: store.getters.newsItem.newsItem,
      loadingStatus: true
    };
  },
  created() {
    this.getData()
  },

  methods: {
    // 解密函数
    decrypt(cipherText) {
        const bytes = this.$CryptoJS.AES.decrypt(cipherText, this.key);
        const plaintext = bytes.toString(this.$CryptoJS.enc.Utf8);
        return plaintext;
    },
    search() {
      if (this.timeValue != null) {
        const [startTime, endTime] = this.timeValue
        this.queryParams.startTime = formatDate(startTime)
        this.queryParams.endTime = formatDate(endTime) 
      }
      this.getData()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 9,
        informationTheme: null,
        reportType: null,
        startTime: null,
        endTime: null
      }
      this.timeValue = null
      this.getData()
    },
    getData(item) {
      this.loadingStatus = true
      listnewsInfo(this.queryParams).then(res => {
        this.totalPage = res.total
        this.newsList = res.rows
        if (this.toPageItem != null) {
          this.information = this.toPageItem
          store.commit('setItem', null)
        } else {
          this.information = this.newsList[0]
        }
        this.loadingStatus = false
      })
    },
    displayPage(item) {
      this.information = item
    },
    handleCurrentChange(item) {
      this.queryParams.pageNum = item
      this.getData()
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 600px;
}
.page_class {
  width: 100%;
  height: 50px;
}
.search_news {
  margin: 10px 0;
}
.list_left {
  float: left;
  width: 30%;
  height: 600px;
  margin: 20px 1%;
  border: 2px solid green;
  border-radius: 20px;;
  position: relative;/* 首先为父容器设置相对定位 */
}
.content_right {
  float: right;
  width: 62%;
  height: 600px;
  margin: 20px 1%;
  padding: 0 1.5%;
  border: 2px solid green;
  border-radius: 20px;
}
.content_title {
  width: 100%;
  height: 8%;
  margin: 10px 0;
  display: flex; /* 设置为 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.content_time_partment {
  width: 100%;
  height: 5%;
  display: flex; /* 设置为 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.content_html {
  width: 100%;
  height: 80%;
  margin: 10px 0;
  overflow: scroll;
} 
.page_class {
  width: 100%;
  position: absolute;
  bottom: -10px;
  /* 可能还需要设置left/right属性以控制水平方向的位置 */
  left: auto; /* 如果希望从左侧开始对齐 */
  right: auto; /* 如果希望从右侧开始对齐，同时需要设置margin-left:auto和margin-right:auto来实现居中 */
}

.orange-square {
  width: 6px; /* 正方形边长 */
  height: 6px; /* 正方形边长 */
  background-color: orange; /* 橙色背景 */
  display: inline-block; /* 可选，使其与其他元素并排显示 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */
}
.infinite-list {
  padding: 0 20px;
}
.infinite-list-item {
  height: 50px;
  margin: 10px 0 ;

  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */

  font-size: 16px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  background-color: rgb(254, 251, 251);
}
.infinite-list-item:hover {
  cursor: pointer;
}
</style>